<style>
    #container{height: 80%;width: 100%}
</style>
<div style="height: 100%" class="main-content">
    <div style="width: 100%; height: 100%;" class="main-content-inner">
        <div id="r-result">请输入地址:<input type="text" id="keyword" name="keyword" onfocus='this.value=""' size="20" value="" style="width:500px;"/>
            纬度 <input type="text" id="lat" name="lat" value="">-
            经度<input type="text" id="lng" name="lng" value="">
        </div>
        <div id="container" class="map" tabindex="0"></div>

        <div class="col-md-offset-3 col-md-9">
            <button onclick="callback();" class="btn btn-info" type="button">
                <i class="ace-icon fa fa-check bigger-110"></i>
                确定选择
            </button>
        </div>
    </div>
</div>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&libraries=place&key=X36BZ-CGMKS-EDPOK-6ZN22-6H23Q-OBBAU"></script>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=X36BZ-CGMKS-EDPOK-6ZN22-6H23Q-OBBAU"></script>

<script type="text/javascript">
        //div容器
        var lat_box = $("#lat");
        var lng_box = $("#lng");
        var address = $("#keyword");
        var container = document.getElementById("container");
        //var centerDiv = document.getElementById("centerDiv");

        //初始化地图
        var map = new qq.maps.Map(container, {
            // 地图的中心地理坐标
            center: new qq.maps.LatLng(41.093583,121.130681),
            zoom: 13
        });
        //创建自定义控件
        var ap = new qq.maps.place.Autocomplete(document.getElementById('keyword'));
        //调用Poi检索类。用于进行本地检索、周边检索等服务。
        var searchService = new qq.maps.SearchService({
            map : map
        });
        //添加监听事件
        qq.maps.event.addListener(ap, "confirm", function(res){
            searchService.search(res.value);
        });

        var middleControl = document.createElement("div");
        middleControl.style.left="49%";
        middleControl.style.top="49%";
        middleControl.style.position="relative";
        middleControl.style.width="36px";
        middleControl.style.height="36px";
        middleControl.style.zIndex="100000";
        middleControl.innerHTML ='<img src="https://www.cdlhome.com.sg/mobile_assets/images/icon-location.png" />';
        document.getElementById("container").appendChild(middleControl);
        //返回地图当前中心点地理坐标
         lat_box.val(map.getCenter().getLat());
         lng_box.val(map.getCenter().getLng());
          //geocoder.getAddress(map.getCenter());
        //centerDiv.innerHTML = "latlng:" + map.getCenter();
        //当地图中心属性更改时触发事件
        qq.maps.event.addListener(map, 'center_changed', function() {
            //centerDiv.innerHTML = "latlng:" + map.getCenter();
            lat_box.val(map.getCenter().getLat());
            lng_box.val(map.getCenter().getLng());
            //geocoder.getAddress(map.getCenter());
        });
</script>
